<template>
    <el-card shadow="never"
             class="aui-card--fill">
        <el-table :data="tableData"
                  ref="tableData"
                  border
                  :cell-style="listCellStyle"
                  :row-class-name="tableRowClassName"
                  @cell-mouse-enter="cellMouseEnter"
                  @cell-mouse-leave="cellMouseLeave"
                  :span-method="objectJBXXMethod">
            <el-table-column prop="name"
                             label="姓名"
                             min-width="120"
                             align="center">
                <template slot-scope='scope'>
                    {{scope.row.name}}
                </template>
            </el-table-column>
            <el-table-column prop="idcard"
                             label="身份证号"
                             min-width="120"
                             align="center">
                <template slot-scope='scope'>
                    {{scope.row.idcard}}
                </template>
            </el-table-column>
            <el-table-column prop="types"
                             label="类型"
                             min-width="180"
                             align="center">
                <template slot-scope='scope'>
                    {{scope.row.types}}
                </template>
            </el-table-column>
            <el-table-column prop="zhanghao"
                             label="账号"
                             min-width="60"
                             align="center"></el-table-column>
            <el-table-column label="操作"
                             width='150px'
                             align='center'>
                <template slot-scope="scope">
                    <el-link size='mini'
                             type='primary'
                             :underline='false'
                             @click="viewInfo(scope)">详情</el-link>
                </template>
            </el-table-column>
        </el-table>
    </el-card>
</template>
 
<script>
export default {
    data () {
        return {
            active_row_list: [], // 当前高亮
            tableData: [
                {
                    name: '赵四',
                    idcard: '515151199909090910',
                    types: 'QQ',
                    zhanghao: '123456'
                },
                {
                    name: '赵四',
                    idcard: '515151199909090909',
                    types: 'QQ',
                    zhanghao: 'weixin_xiaowei'
                },
                {
                    name: '赵四',
                    idcard: '515151199909090909',
                    types: '身份证',
                    zhanghao: '515151199909090909'
                },
                {
                    name: '赵四',
                    idcard: '515151199909090909',
                    types: '钉钉',
                    zhanghao: '18080808080'
                },
                {
                    name: '赵四',
                    idcard: '515151199909090909',
                    types: '钉钉',
                    zhanghao: '18080808080'
                },
                {
                    name: '赵四',
                    idcard: '515151199909090909',
                    types: '钉钉',
                    zhanghao: '18080808080'
                },
                {
                    name: '赵四',
                    idcard: '515151199909090909',
                    types: '钉钉4',
                    zhanghao: '18080808080'
                },
                {
                    name: '张三',
                    idcard: '3333333333333',
                    types: 'QQ',
                    zhanghao: '123456'
                },

            ]
        }
    },

    methods: {
        getTableData () {
            let spanOneArr = [],
                spanTwoArr = [],
                spanThreeArr = [],
                concatOne = 0,
                concatTwo = 0,
                concatThree = 0
            this.tableData.forEach((item, index) => {
                if (index === 0) {
                    spanOneArr.push(1)
                    spanTwoArr.push(1)
                    spanThreeArr.push(1)
                } else {
                    if (item.name === this.tableData[index - 1].name) { //第一列需合并相同内容的判断条件
                        spanOneArr[concatOne] += 1
                        spanOneArr.push(0)
                    } else {
                        spanOneArr.push(1)
                        concatOne = index
                    }

                    if (item.idcard === this.tableData[index - 1].idcard) { //第二列和第16列需合并相同内容的判断条件
                        spanTwoArr[concatTwo] += 1
                        spanTwoArr.push(0)
                    } else {
                        spanTwoArr.push(1)
                        concatTwo = index
                    }

                    if (item.types === this.tableData[index - 1].types) { //第三列和第列需合并相同内容的判断条件

                        spanThreeArr[concatThree] += 1
                        spanThreeArr.push(0)
                    } else {
                        spanThreeArr.push(1)
                        concatThree = index
                    }
                }
            })
           
            return {
                one: spanOneArr,
                two: spanTwoArr,
                three: spanThreeArr
            }
        },
        objectJBXXMethod ({
            row,
            column,
            rowIndex,
            columnIndex
        }) {
            if (columnIndex === 0) {
                const _row = (this.getTableData(this.tableData).one)[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
            if (columnIndex === 1) {
                const _row = (this.getTableData(this.tableData).two)[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
            if (columnIndex === 2) {
                const _row = (this.getTableData(this.tableData).three)[rowIndex]
                const _col = _row > 0 ? 1 : 0
                return {
                    rowspan: _row,
                    colspan: _col
                }
            }
        },
        cellMouseEnter (row) {
            this.active_row_list = this.tableData.filter(item => item.name === row.name);
        },
        cellMouseLeave () {
            this.active_row_list = []
        },
        listCellStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex < 3) {
                return {
                    backgroundColor: "transparent",
                }
            }
        },
    },
    computed: {
        tableRowClassName ({ row }) {
            return this.active_row_list.some(item => item.name === row.name) ? 'sucess_row' : '';
        },
    },
    mounted () {

    }
}
</script>
<style lang="scss" scoped>
.el-table {
    >>> .sucess_row {
        background: rgba(220, 240, 254, 1) !important;
    }
    >>> .el-table__row:hover {
        td {
            background: rgba(220, 240, 254, 1) !important;
        }
    }
}
</style>